<!--创建作品-->
<template>
    <div style="background-color: aliceblue;width: 100%;height: 1100px">
        <div style="width: 1300px;margin: auto;">
            <el-menu class="el-menu-demo;" mode="horizontal">
                <el-menu-item>
                    <div>
                        <el-button class="el-icon-edit" @click="work">作品管理</el-button>
                        <span> >> </span>
                        <el-button class="el-icon-circle-plus-outline" @click="crea">创作管理</el-button>
                    </div>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="divv">
            <h2 style="margin-left: -950px">创建作品</h2>
            <hr size=1 redwidth=300>
            <!--步骤条-->
            <div class="addTask div-bzt">
                <steps ref="stepsChild"></steps>
                <!--内容区域-->
                <div class="task-main-box" style="color: black">
                    <!--                    第一步，选择类型-->
                    <div v-if="stepsIndex == 0" class="task-con-box">
                        <el-radio-group v-model="radio" v-for="(l,index) in classify" :key="index">
                            <div style="width: 70%;height: 450px;margin: auto;background-color: aliceblue;">
                                <div style="height: 490px;">
<!--                                    for循环所有分类-->
                                    <el-radio class="radio" border style="margin-top: 50px;margin-left: 50px" :label="i"
                                              v-for="(i,index) in l.list" :key="index" @change="getradio(i)"
                                    >{{i.title}}
                                    </el-radio>
                                </div>
                            </div>
                        </el-radio-group>
                    </div>
                    <div v-if="stepsIndex == 1" class="task-con-box">
                        <!--                        第二步，完善信息-->
                        <div>
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                                     class="demo-ruleForm" style="margin-left: 310px">
                                <el-form-item label="作者名称" prop="title" >
                                    <el-input placeholder="请填写" v-model="ruleForm.title" ></el-input>
                                </el-form-item>
                                <el-form-item label="作品名称" prop="name">
                                    <el-input placeholder="请填写" v-model="ruleForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="作品类型" prop="region">
<!--                                    获取分类所选值-->
                                    <el-select style="margin-left: -130px" v-model="ruleForm.region" disabled
                                               v-for="(l,index) in classify" :key="index" placeholder="请选择">
                                        <el-option :label="ruleForm.region" :value="ruleForm.region" disabled></el-option>
                                    </el-select>
                                </el-form-item>
                                <hr>
                                <div>
                                    <el-form-item label="作品内容介绍" prop="introduce">
                                        <el-input type="textarea" :rows="5" placeholder="请填写"
                                                  v-model="ruleForm.introduce"></el-input>
                                        <!--                                        <textarea rows="10" style="width: 340px" placeholder="请填写" v-model="ruleForm.introduce"></textarea>-->
                                    </el-form-item>
                                </div>
                                <div style="margin-top: 50px;">
                                    <el-form-item label="给读者的话" prop="leaveword">
                                        <el-input type="textarea" placeholder="支持原创文学，支持正版阅读！"
                                                  v-model="ruleForm.leaveword"></el-input>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </div>
                <!--操作按钮-->
                <div class="button-box">
                    <div>
                        <el-button style="margin-top: 50px;" v-if="stepsIndex == 1" type="primary"
                                   @click="submitForm('ruleForm')">创建作品
                        </el-button>
                        <el-button style="margin-top: 50px;" v-if="stepsIndex == 1" @click="resetForm('ruleForm')">重置
                        </el-button>
                    </div>&nbsp;&nbsp;&nbsp;&nbsp;
                    <div>
                        <el-button style="margin-top: 50px;" @click="prevSteps" v-if="stepsIndex != 0">上一步</el-button>
                    </div>
                    <div>
                        <el-button style="margin-top: 50px;" @click="nextSteps" v-if="stepsIndex != 1">下一步</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import steps from "../components/Steps.vue";

    export default {
        name: "Creation",
        data() {
            return {
                title: {},
                //新建任务
                stepsIndex: 0,
                stepsData: [
                    {name: '选择分类'},
                    {name: '完善信息'},
                    {name: '创建成功'},
                ],
                newDate: null,
                radio: '',
                classify: {},
                // 表单
                ruleForm: {
                    title: localStorage.getItem("title"),   //作者名称
                    name: '',   //作品名称
                    region: '',   //作品类型
                    introduce: '',   //作品介绍
                    category: '',
                    leaveword: '希望每一本作品都不辜负你们的期望，支持正版，就在纵横！',
                },
                rules: {
                    title: [
                        {required: true, message: '请输入作者名称', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入作品名称', trigger: 'blur'},
                        {min: 1, max: 15, message: '长度在 1 ~ 15 个字以内', trigger: 'blur'}
                    ],
                    region: [
                        {required: true, message: '请选择作品类型', trigger: 'change'}
                    ],
                    introduce: [
                        {required: true, message: '请填写作品内容介绍', trigger: 'blur'},
                        {min: 20, max: 500, message: '20 ~ 500字以内', trigger: 'blur'}
                    ],
                    leaveword: [
                        {required: true, message: '请填写作品介绍', trigger: 'blur'},
                        {min: 0, max: 30, message: '0 ~ 30字以内', trigger: 'blur'}
                    ],
                },
            };
        },
        created() {
            var aData = new Date();
            this.newDate = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
            this.$http.post('cate/list').then(response => {
                this.classify = response.data;
            })
        },
        methods: {
            crea() {
                this.$router.replace("/creation")
            },
            work() {
                this.$router.replace("/myWorks")
            },
            //返回数据采集页面
            goback() {
                this.$parent.addTask = false;
            },
            getradio(i) {
                this.ruleForm.region = i.title;
                this.ruleForm.category = i.id;
            },
            //下一步
            prevSteps() {
                this.stepsIndex--
                this.$refs.stepsChild.stepsFun()
            },
            nextSteps() {
                this.stepsIndex++
                this.$refs.stepsChild.stepsFun()
            },
            // 第二步表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const list = {
                            category: this.ruleForm.category,
                            title: this.ruleForm.name,
                            author: this.ruleForm.title,
                            pic: 'MonRen.jpg',
                            content: this.ruleForm.introduce,
                            tag: this.ruleForm.region,
                            up: 0,
                            down: 0,
                            hits: 0,
                            rating: 0,
                            rating_count: 0,
                            serialize: 0,
                            favorites: 0,
                            position: 0,
                            template: 'qwe',
                            link: '/zhzw/jx',
                            create_time: this.newDate,
                            update_time: this.newDate,
                            reurl: 1,
                            status: 1,
                            hits_day: 0,
                            hits_week: 0,
                            hits_month: 0,
                            hits_time: 0,
                            word: 0,
                            recommend: 0,
                            uid: localStorage.getItem("id"),
                        }
                        this.$http.post("nove/save", list).then(response => {
                            if (response.status===200) {
                                this.$message({
                                    showClose: true,
                                    message: '创建成功！',
                                    type: 'success',
                                });
                                this.$router.replace("/myWorks")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        components: {   //步骤条组件
            steps
        }
    }
</script>

<style scoped>
    .divv {
        background-color: white;
        margin: auto;
        margin-top: 20px;
        width: 1100px;
        height: 900px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    /*步骤条*/
    .addTask {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .task-main-box {
        width: 100%;
        height: calc(100% - 45vh);
        margin-top: 50px;
    }

    .task-con-box {
        width: 100%;
        height: 100%;
    }

    .button-box {
        display: flex;
        justify-content: center;
    }

    .div-bzt {
        padding: 10px;
        margin: 10px;
        margin-top: -150px;
        border-radius: 4px;
        cursor: pointer;
        color: #ffffff;
    }
</style>
